<template>
    <div class="tkmap" id="map"></div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { init, addPOINT, getgeom,mapreset } from '../../utils/mapjs/map';
import { dataStore } from "../../store/data";
const $store = dataStore();
const newname = ref("");
const newcode = ref("");
onMounted(() => {
    init();
    mapreset();
    getgeom();
    addPOINT($store.name, $store.code, $store.geom,16,'red',14,true);
});
watch(() => $store.name, (nv, ov) => {
    if (nv) {
        addPOINT($store.name, $store.code, $store.geom,16,'red',14,true);
    }
});
</script>

<style scoped lang="less">
.tkmap {
    height: 500px;
    width: 500px;
    .ol-overlaycontainer-stopevent {
        display: none;
    }

    .ol-zoom-out {
        display: none;
    }

    .ol-zoom-in {
        display: none;
    }
}
</style>
